<template>
	<div class="edit-box">
		<m-header v-if="componentType === type.header"></m-header>
		<m-list v-if="componentType === type.list"></m-list>
		<m-banner v-if="componentType === type.banner" :relGroup="componentRelGroup"></m-banner>
		<m-notice v-if="componentType === type.notice"></m-notice>
		<m-productItem v-if="componentType === type.productItem" :relGroup="componentRelGroup"></m-productItem>
		<mm-food v-if="componentType === type.food" :relGroup="componentRelGroup"></mm-food>
		<featured-goods v-if="componentType === type.featuredGoods" :relGroup="componentRelGroup"></featured-goods>
    	<classify v-if="componentType === type.classify"> </classify>
    	<m-productItemNew v-if="componentType === type.ProductItemNew" :relGroup="componentRelGroup"></m-productItemNew>
    	<m-featuredGoodsNew v-if="componentType === type.FeaturedGoodsNew" :relGroup="componentRelGroup"></m-featuredGoodsNew>
    	<m-newZone v-if="componentType === type.NewZone" :relGroup="componentRelGroup"></m-newZone>
    	<tab-head v-if="componentType === type.TabHead" :relGroup="componentRelGroup"></tab-head>
    	<m-firstClassifyNew v-if="componentType === type.FirstClassifyNew" :relGroup="componentRelGroup"></m-firstClassifyNew>
    	<!--<m-GuessYouLike v-if="componentType === type.GuessYouLike" :relGroup="componentRelGroup"></m-GuessYouLike>-->
    	<m-ErjiCategory v-if="componentType === type.ErjiCategory" :relGroup="componentRelGroup"></m-ErjiCategory>
    	<m-ErjiCategoryContent v-if="componentType === type.ErjiCategoryContent" :relGroup="componentRelGroup"></m-ErjiCategoryContent>
	</div>

</template>

<script>
import Header from './Header';
import List from './List';
import Banner from './Banner';
import Notice from './Notice';
import ProductItem from './ProductItem';
import Food from "./Food";
import FeaturedGoods from "./FeaturedGoods";
import Classify from './Classify';
import ProductItemNew from './ProductItemNew';
import FeaturedGoodsNew from './FeaturedGoodsNew';
import TabHead from "./TabHead";
import NewZone from './NewZone';
import FirstClassifyNew from './FirstClassifyNew';
import GuessYouLike from './GuessYouLike';
import ErjiCategory from './ErjiCategory';
import ErjiCategoryContent from './ErjiCategoryContent';
import {mapGetters} from "vuex";
export default {
  	name: 'hello',
  	data () {
    	return {
			msg: '这是测试首页',
			type: {
				header: "header",
				list: "list",
				banner: "HomeCarousel",
				notice:"HomeNotice",
				productItem:"HomeProductItem",
				food:"HomeFoodTime",
				classify:"HomeFirstClassification",
				featuredGoods:"HomeFeaturedGoods",
				ProductItemNew:"ProductItemNew",
				FeaturedGoodsNew:"FeaturedGoodsNew",
				NewZone:"NewZone",
				TabHead: "TabHead",
				FirstClassifyNew:"FirstClassifyNew",
				GuessYouLike:"GuessYouLike",
				ErjiCategory:"ErjiCategory",
				ErjiCategoryContent:"ErjiCategoryContent"
			}
		}
	},
	components: {

	},
	computed: {
		...mapGetters([
			"editConfig"
		]),
		componentType() {
			console.log("this.editConfig.type", this.editConfig.type);
			return this.editConfig.type;
		},
		//这个值对应的是relGroup;
		componentRelGroup() {
			return this.editConfig.id;
		}
	},
	created () {
		if(!this.$store.getters['cjy/newClassifyData']) {
			 	this.$store.dispatch('cjy/queryNewClassifyList');
			}
		// console.log(this.$store);
	},
	mounted () {

	},
	components: {
		"m-header": Header,
		"m-list": List,
		"m-banner": Banner,
		"m-notice":Notice,
		"m-productItem":ProductItem,
		"mm-food": Food,
		'featured-goods':FeaturedGoods,
  		 Classify,
  		"m-productItemNew":ProductItemNew,
  		"m-featuredGoodsNew":FeaturedGoodsNew,
		"m-newZone":NewZone,
		"tab-head": TabHead,
  		"m-firstClassifyNew":FirstClassifyNew,
  		"m-GuessYouLike":GuessYouLike,
  		"m-ErjiCategory":ErjiCategory,
  		"m-ErjiCategoryContent":ErjiCategoryContent,
		// "handle-button": HandleButton,
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.edit-box {
         /* display: flex;  */
         /* border: 1px solid blue; */
          height: 500px;
          width: 100%;
		  overflow: scroll;
         /* margin-top: 20px; */
	}
</style>
